<script setup>
import HeaderNav from '@/components/HeaderNav.vue'
import {listHouse} from "@/api/house/house.js";
import HouseCardItem from "@/components/HouseCardItem.vue";

const queryParams = ref({
  houseName: null,
  status: "0",
  hasAirConditioner: null,
  orientation: "0",
  hasElevator: null,
  bedroomCount: 0,
  bathroomCount: 0,
  kitchenCount: 0,
  livingroomCount: 0,
  floor: 0,
  page: 1,
  pageSize: 10000,
})

const houses = ref([])

const getHouseList = async () => {
  listHouse(queryParams.value).then(res => {
    houses.value = res.rows
  })
}

const handleSearch = () => {
  getHouseList()
}

onMounted(async () => {
  await getHouseList()
  console.log(houses.value)
})
</script>

<template>
  <div style="background: #f7f9fc;padding-bottom: 60px;min-height: 100vh">
    <header-nav :active="1"/>
    <div class="search-box">
      <div class="box-left">
        <el-alert title="TIP:0为不限" type="warning" style="margin-bottom: 10px;"/>

        <el-form label-position="top" label-width="auto" :model="queryParams" size="large">

          <el-form-item label="关键词" label-position="right">
            <el-input v-model="queryParams.houseName"/>
          </el-form-item>
          <el-form-item label="朝向" label-position="right">
            <el-select v-model="queryParams.orientation">
              <el-option label="不限" value="0"/>
              <el-option label="正东" value="1"/>
              <el-option label="正西" value="2"/>
              <el-option label="正北" value="3"/>
              <el-option label="正南" value="4"/>
              <el-option label="东南" value="5"/>
              <el-option label="东北" value="6"/>
              <el-option label="西南" value="7"/>
              <el-option label="西北" value="8"/>
            </el-select>
          </el-form-item>
          <el-row>
            <el-col :span="11">
              <el-form-item label="卧室数量" label-position="right">
                <el-input-number v-model="queryParams.bedroomCount" :min="0" :max="100"/>
              </el-form-item>
            </el-col>

            <el-col :span="11">
              <el-form-item label="卫生间数量" label-position="right">
                <el-input-number v-model="queryParams.bathroomCount" :min="0" :max="100"/>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="11">
              <el-form-item label="厨房数量" label-position="right">
                <el-input-number v-model="queryParams.kitchenCount" :min="0" :max="100"/>
              </el-form-item>
            </el-col>

            <el-col :span="11">
              <el-form-item label="客厅数量" label-position="right">
                <el-input-number v-model="queryParams.livingroomCount" :min="0" :max="100"/>
              </el-form-item>
            </el-col>
          </el-row>

          <el-form-item label="楼层" label-position="right">
            <el-input-number v-model="queryParams.floor" :min="0" :max="100"/>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="handleSearch" style="width: 100%;">搜索</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="box-right">
        <el-row :gutter="48" justify="space-between" style="padding: 0 48px;" v-if="houses&&houses.length>0">
          <el-col :span="12" v-for="item in houses" :key="item.id">
            <HouseCardItem :house="item"/>
          </el-col>
        </el-row>
        <div v-else style="text-align: center;padding: 20px;margin-top: 30vh;font-size: 30px;color: #ccc">
          暂无数据
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
.search-box {
  display: flex;
  padding: 0 200px;
  width: 100vw;

  .box-left {
    width: 30%;
    background: #fff;
    padding: 20px;
  }

  .box-right {
    width: 70%;
    height: 200px;
    margin-left: 20px;
  }
}
</style>
